<!--
 * @Author: xjt
 * @Date: 2021-06-24 23:29:47
 * @LastEditTime: 2021-06-24 23:30:00
 * @Description: 待办事项查询
 * @LastEditors: xjt
-->
<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      :pageInfo="pager"
      :listData="tableData"
      :filterList="filterList"
      :selectData="selectDataArr"
      searchName="keyword"
      :menuList="[]"
      @menu-click="handleMenuClick"
    >
      <el-table
        :data="tableData"
        align="left"
        ref="multipleTable"
        @selection-change="$event => (selectDataArr = $event)"
      >
        <el-table-column label="序号" type="index" width="55" />
        <el-table-column label="隔离点名称" prop="engineeringName" width="150" show-overflow-tooltip />
        <el-table-column label="所属区划" prop="engineeringName" width="130" />
        <el-table-column label="房号" prop="initiateTime" width="80" :formatter="dateFormatter" />
        <el-table-column label="入住时间" prop="problemDesc" min-width="150" />
        <el-table-column label="入住截止时间" width="150" prop="initiateTime" :formatter="dateFormatter" />
        <el-table-column label="剩余隔离天数" prop="day" min-width="150">
          <template slot-scope="scope">
            {{scope.count?scope.count:'--'}}
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="name" min-width="100" />
        <el-table-column label="证件号码" prop="cardId" min-width="150" />
        <el-table-column label="联系方式" prop="phone" min-width="150" />
        <el-table-column label="国籍地区" prop="diqu" min-width="80" />
        <el-table-column label="来源" prop="source" min-width="80" />
        <el-table-column label="风险等级" prop="dengji" min-width="120">
          <template slot-scope="scope">
            <el-tag
              disable-transitions
              :type="scope.name === '中风险地区' ? 'warning' : 'danger'"
            >{{scope.name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="人员状态" prop="state" fixed="right" width="80" class="operaColumn">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleBtnClick('preview',scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <!-- 新增|编辑|查看 单位 -->
    <hotelDialog ref="hotelDialog" />
  </basic-container>
</template>

<script>
import { getPaymentList } from '@/views/wy-operate/api/payment'
import hotelDialog from '../components/dialog.vue'

export default {
  components: {
    hotelDialog
  },
  provide() {
    return {
      initList: this.queryData,
    };
  },
  beforeMount() {
    this.queryData();
  },
  data() {
    return {
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        keyword: ''
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      // 页面loading
      loading: false,
      // 筛选项
      filterList: [
        { label: '所属区划', inputType: 'select', children: [], multiple: false, name: 'jiedao' },
        { label: '入住时间', inputType: 'datetimerange', name: ['paymentDateStart', 'paymentDateEnd'] },
        { label: '入住截止时间', inputType: 'datetimerange', dictName: 'payment-contract-type', name: ['paymentDateStart', 'paymentDateEnd'] },
        { label: '最大剩余天数', inputType: 'input', dictName: 'payment-contract-type', name: 'contractTypeList' },
        { label: '最小剩余天数', inputType: 'input', name: 'days' },
        { label: '姓名', inputType: 'input', name: 'name' },
        { label: '证件号码', inputType: 'input', dictName: 'payment-contract-type', name: 'paymentProjectList' },
        { label: '来源', inputType: 'select', dictName: 'payment-contract-type', children: [], name: 'contractTypeList' },
        { label: '风险等级', inputType: 'select', dictName: 'payment-contract-type', children: [], name: 'paymentProjectList' },
        { label: '人员状态', inputType: 'select', dictName: 'payment-contract-type', children: [], name: 'contractTypeList' },
      ],
    }
  },
  computed: {
    // 菜单列表
    menuList() {
      return this.getPermissions('pay_contract_registration_batch_del') ? ['add', 'delete', 'export'] : ['add', 'export']
    },
  },
  methods: {
    // 数据请求
    queryData(params = {}) {
      this.loading = true
      let requestData = { ...this.params, ...params }
      if (requestData.signingDateStart == '') {
        delete requestData.signingDateStart
      }
      if (requestData.signingDateEnd == '') {
        delete requestData.signingDateEnd
      }
      getPaymentList(requestData).then(res => {
        const { current, size, total, records } = res.data.data
        this.tableData = records
        this.params = requestData
        this.pager = { total, current, size }
      }).finally(() => {
        this.loading = false
      })
    },
    // 菜单点击监听
    handleMenuClick(type) {

      switch (type) {
        case 'add':
          this.$refs.dialog.show({ type: 'add' })
          break;
        case 'delete':
          let ids = this.selectDataArr.map((sd) => sd.paymentRegistrationId);
          this.deleteData(ids, 'menu');
          break;
        case 'export':
          this.publicExport('其他付款合同付款登记记录', '/api/payment/contract/registration/export', this.params, 'xls')
          break;
        default:
          this.$message(type)
          break;
      }
    },

    //表格按钮点击事件监听
    handleBtnClick (type,row) {
        switch (type) {
        case 'preview':
        case 'edit':
        case 'approval':
          this.$refs.hotelDialog.show({
            type,
            data: JSON.parse(JSON.stringify(row))
          })
          break;
        default:
          break;
      }
    },

    // 格式化
    dataFormatter(row, column, cellValue) {
      switch (column.property) {
        case 'paymentDate': // 付款日期
          return cellValue ? cellValue.split(' ')[0] : '';
        case 'paymentProject': // 付款项目
          let type = this.contractTypes.find(item => item.value == cellValue)
          return type ? type.label : '';
        case 'paymentNum': // 付款次数
          return `第 ${cellValue} 次`
        default:
          break;
      }
    },
  }
}
</script>
